<template>
  <div>
    <div style="display: flex; justify-content: space-between">
      <label>
        <input type="checkbox" v-model="arrcomplete" @change="dain" />
        <samp style="font-size: 14px"
          >已完成{{ num }}/全部{{ arr.length }}</samp
        >
      </label>
      <button
        style="background-color: red; color: white; border: 1px solid #ddd"
        @click="ck"
      >
        清除已完成任务
      </button>
    </div>
  </div>
</template>
<script>
export default {
  props: ["arr", "num", "arrcomplete1"],
  data() {
    return {
      arrcomplete: this.arrcomplete1,
    };
  },
  created() {},
  watch: {

    arr: {
      handler(newVlaue, ol) {
        if (this.arr.length==0) {
            this.arrcomplete = false;
          }
        let shu = 0;
        for (let index = 0; index < this.arr.length; index++) {
          if (this.arr[index].complete == true) {
            shu += 1;
            if (shu == this.arr.length) {
              this.arrcomplete = true;
            }else{
              this.arrcomplete = false;
            }
          }else{
            this.arrcomplete = false;
          }
        }
      },
      immediate: true, //一进入页面就执行handler里的代码
      deep: true,
    },
  },
  computed: {},
  methods: {
    ck() {
      for (let index = 0; index < this.arr.length; index++) {
        if (this.arr[index].complete == true) {
          this.arr.splice(index, 1);
          if (this.arr.length==0) {
            this.arrcomplete = false;
          }
          index--;
        }
      }
      localStorage.setItem("data", JSON.stringify(this.arr));
    },
    dain(e) {
      console.log(e);
      if (e.target.checked == true) {
        for (let index = 0; index < this.arr.length; index++) {
          this.arr[index].complete = true;
        }
      } else {
        for (let index = 0; index < this.arr.length; index++) {
          this.arr[index].complete = false;
        }
      }
      localStorage.setItem('data', JSON.stringify(this.arr)) 
    },
  },
};
</script>
<style lang='less' scoped>
</style>
